<template>
    <dl class="product" @click="goDetail">
        <dt>
            <img src="../assets/logo.png" alt="">
        </dt>
        <dd>
            <h6>{{title}}</h6>
            <p>{{desc}}</p>
            <span>{{price}}</span>
        </dd>
    </dl>
</template>

<script>
export default {
    props:['title','desc','price','pic','id'],
    methods:{
        goDetail(){
            this.$router.push({name:'详情',params:{id:this.id}})
            // this.$router.push({path:`/detail/${this.id}`})

            //==1.携带参数

            //1.动态路由传参  params 需要配置路由的  /detail/:id   
            //2.query  

            // this.$router.push({path:'/detail',query:{id:this.id}})

            //==跳转路由

            //push()     直接追加       

            //replace()  会替换当前的路由记录

            //声明式 
            //<router-link to=""></router-link>
        }
    }
}
</script>

<style lang="scss">
    .product{
        width:100%;
        display: flex;
        dt{
            width:80px;
            height: 180px;
            overflow: hidden;
            margin-right:10px;
            img{
                width:100%;
            }
        }
    }
</style>